<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
        <script src="vue.js"></script>
    </head>
<body>
<!--
        1.big函数何时被调用：1.指令和元素成功绑定时；
                        2.指令所在的模板呗重新解析时；
        2.自定义指令
            1.定义语法：
                局部指令：new Vue({               new Vue({
                directives:{指令名：配置对象}  或      directives{指令名：回调函数}
                })                              })
            2.全局指令：
                Vue.directive(指令名，配置对象)  或  Vue.directive(指令名，回调函数)
            3.3个回调：
                1.bind：指令与元素绑定时调用
                2.inserted：指令所在的元素被插入页面时调用
                3.update：指令所在模板结构比重新解析时调用
            4.备注：
                1.指令定义时，不加v-，但是使用时加v-
                2.指令如果是多单词，使用key-case命名方式，不用驼峰

-->
<div id="root">
    <div v-text="name"></div>
    <h2>当前的n：<span v-text="n"></span></h2>
    <button @click="n++">add</button>
    <h2 v-big="n">放大的n：{{n}}</h2>
    <h2 v-big2="n">放大的n：{{n}}</h2>

    <input type="text" v-bind:value="n">
    <input type="text" v-fbind:value="n">
    <input type="text" v-fbind2:value="n">
</div>
</body>
<script type="text/javascript">
        //全局自定义指令
        Vue.directive('fbind2',{
            //指令与元素成功绑定时
            bind(element,binding){
                element.value = binding.value*100
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板呗重新解析时
            update(element,binding){
                element.value = binding.value*100
            }
        })
        Vue.directive('big2',function (element,binding){
            element.innerText ="放大后的n:"+ binding.value*10
        })




    new Vue({
        el:'#root',
        data:{
            name:"hello",
            n:1
        },
        directives:{
            //此处this为window
            //函数写法
            big(element,binding){//要操作的DOM，获得的数据
                element.innerText ="放大后的n:"+ binding.value*10
            },
            // fbind(element,binding){
            //     element.value = binding.value
            //     element.focus()
            // }
            //类写法
            'fbind':{
                //指令与元素成功绑定时
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板呗重新解析时
                update(element,binding){
                    element.value = binding.value
                }
            }

        }
    })

</script>
</html>